﻿<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
    <meta name="format-detection" content="telephone=no"/>
    <meta content="no-cache" http-equiv="pragma">
    <meta content="no-cache" http-equiv="cache-control">
    <meta content="0" http-equiv="expires">
    <title>登录</title>
    <!--<script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>-->


    <!--<script src="/static/js/vue.min.js"></script>-->
    <script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery-weui/1.2.0/js/jquery-weui.min.js"></script>
    <script src="/static/js/vue.js"></script>

    <link rel="stylesheet" href="/static/jquery-weui/css/weui.min.css">
    <link rel="stylesheet" href="/static/jquery-weui/css/jquery-weui.css">
    <!--<link rel="stylesheet" href="/static/jquery-weui/css/demos.css">-->

    <!--<script src="/static/jquery-weui/js/jquery-2.1.4.js"></script>-->
    <script src="/static/jquery-weui/js/fastclick.js"></script>
    <link href="/static/css/css.css" rel="stylesheet" type="text/css"/>


    <style>
        .headTitle {
            border: none;
        }

        .login {
            height: auto;
            /*padding-top: 30px;*/
        }

        body {
            background-color: #fff;
        }
    </style>
</head>
<body>
<!--头部-->
<header class="head headTitle">
    <a class="back" href="#" onclick="history.back()"><img src="/static/images/back_gray.png" alt="返回"></a>
    <h1 class="title">登录</h1>
    <a class="sign" href="/home/my/my"><img src="/static/images/sign.png" alt="登录"></a>
</header>
<div class="login backWhite" id="app">
    <!--登录切换方式-->
    <div class="swiper-container tabNav loginTab swiper-container-horizontal">
        <div class="swiper-wrapper">
            <div class="swiper-slide " to="2" style="width: 187.5px;">
                <a class="hover" href="#">密码登录</a>
            </div>

            <div class="swiper-slide " style="width: 187.5px;" to="1">
                <a class="" href="#">验证码登录</a>
            </div>

        </div>
    </div>


    <div id="tab01_1" class="loginA">
        <form action="" method="post" id="loginForm" style="display: none">
            <p>
                <input class="loginTelZ" id="p1" type="number" name="phone" value="" placeholder="请输入11位手机号"
                       minlength="11" maxlength="11" required="" autofocus="" autocomplete="off">

                <input class="btnGray loginObtain sendSMS" type="button" v-if="!sending" onclick="get_code()"
                       value="获取验证码">
                <input class="btnGray loginObtain sendSMS" type="button" v-if="sending" disabled="disabled"
                       :value="sec+' 秒'">

            </p>
            <p>
                <input class="loginTelM" id="code" type="text" name="code" placeholder="请输入验证码" minlength="6" maxlength="6"
                       required="" autocomplete="off">
            </p>
            <p>
                <input class="btnOrange loginButton submitBtn" type="button" value="立即登录">
            </p>
            <p>
                <a class="loginRegister" href="/login/register">免费注册</a>
            </p>
            <!--第三方快捷登录-->

        </form>

        <form action="" method="post" id="loginForm2" >
            <p>
                <input class="loginSignZ" name="phone" id="p2" value="" type="number" placeholder="请输入11位手机号"
                       autofocus="" autocomplete="off">
            </p>
            <p>
                <input class="loginSignM" name="password" id="ps" type="password" placeholder="请输入密码"
                       autocomplete="off">
            </p>
            <p>
                <input class="btnOrange loginButton submitBtn2" type="button" value="立即登录">
            </p>
            <p>
                <a class="loginForget" href="#">忘记密码</a>
                <a class="loginRegister" href="#">免费注册</a>
            </p>

        </form>


    </div>


</div>


<script>


    var app = new Vue({
        el: '#app',
        data: {
            sending: false,
            sec: 30
        }
    });


    $('.swiper-slide').click(function () {
        $('.swiper-slide').find('a').removeClass('hover');
        $(this).find('a').addClass('hover');
        var to = $(this).attr('to');
        console.log(to);
        $('form').hide();
        if (to == 1) {

            $('#loginForm').fadeIn();
        } else {

            $('#loginForm2').fadeIn();
        }
    });

    $('.submitBtn').click(function () {
        var phone=$('#p1').val();
        var code=$('#code').val();
        if(phone&&code){
            $.post('mobileauth',$('#loginForm').serialize(),function (res) {
                if(res.code==1){
                    $.toast(res.msg);
                    location.href='/home/my/my'
                }else {
                    $.toast(res.msg,'cancel');
                }
            });
        }

    });

    $('.submitBtn2').click(function () {
        var phone=$('#p2').val();
        var password=$('#ps').val();
        if(phone&&password){
            $.post('login',$('#loginForm2').serialize(),function (res) {
                if(res.code==1){
                    $.toast(res.msg);
                    location.href='/home/my/my'
                }else {
                    $.toast(res.msg,'cancel');
                }
            });
        }

    });


    function get_code() {

        var phone=$('#p1').val();
        if(phone){

            app.sending = true;
            var tm = setInterval(function () {
                app.sec--;
                if (app.sec == 0) {
                    clearInterval(tm);
                    app.sending = false;
                    app.sec=30;
                }
            }, 1000);

            $.get('/home/auth/sms',{phone:phone},function (res) {
                if(res.code==1){
                    $.toast(res.msg);
                }else {
                    $.toast(res.msg,'cancel');
                }

            });
        }



//        clearInterval(tm);
    }

</script>

</body>
</html>
